<header fxLayout="column">
  <div fxLayout fxLayoutAlign="start center" style="line-height: 40px">
      <span (dblclick)="copy(silkCarRecordInfo.id)" fxFlex style="font-size: 20px">
        {{silkCarRecordInfo.silkCar.code}}
        - {{silkCarRecordInfo.batch.batchNo}}
        - {{silkCarRecordInfo.batch.product.name}}
        - {{silkCarRecordInfo.batch.spec}}
      </span>
    <button [matMenuTriggerFor]="menu" color="primary" mat-icon-button>
      <mat-icon>list</mat-icon>
    </button>
    <mat-menu #menu="matMenu" xPosition="before">
      <button *ngFor="let it of productProcesses$|async" mat-menu-item type="button">
        {{it.name}}
      </button>
      <button (click)="addToDtyConfirmEvent()" *ngIf="canAddToDtyConfirmEvent" mat-menu-item type="button">{{'EventSourceType.ToDtyConfirmEvent'|translate}}</button>
    </mat-menu>
  </div>

  <div fxLayout fxLayoutAlign="start center" style="height: 24px;line-height: 24px;">
    <span style="color: rgba(0,0,0,.54)">
     {{silkCarRecordInfo.initOperator.name}}  {{silkCarRecordInfo.initDateTime|date:'yyyy-MM-dd HH:mm:ss'}}
    </span>
    <mat-chip [selectable]="false" fxFlexOffset="16px" selected style="padding: 0 4px;">
      {{silkCarRecordInfo.initTypeString|translate}}
    </mat-chip>
    <mat-chip [color]="silkCarRecordInfo.grade.sortBy>=100?'primary':'warn'" [matTooltip]="'SilkCarRecord.grade'|translate" [selectable]="false" fxFlexOffset="16px" matTooltipPosition="right" selected style="padding: 0 4px;">
      {{silkCarRecordInfo.grade.name}}
    </mat-chip>
  </div>

  <div *ngIf="silkCarRecordInfo.validSideSilks.length>0" fxLayout fxLayoutAlign="start center">
    <button (click)="selectBySide(silkCarRecordInfo.aSideSilks)" color="primary" mat-button type="button">
      {{'SilkCar.SideType.A'|translate}}
    </button>
    <button (click)="selectBySide(silkCarRecordInfo.bSideSilks)" color="primary" mat-button type="button">
      {{'SilkCar.SideType.B'|translate}}
    </button>
    <button (click)="selectByLineMachine(btn)" *ngFor="let btn of lineMachineSelectBtns" color="primary" mat-button type="button">
      {{btn.label|translate}}
    </button>
    <span fxFlex></span>
    <button (click)="resetSelected();$event.stopPropagation();" color="accent" mat-button type="button">
      {{'Common.reset'|translate}} [{{selectedCount}}]
    </button>
  </div>
</header>

<mat-divider></mat-divider>

<section fxFlex fxLayout="column">
  <mat-grid-list [cols]="silkCarRecordInfo.silkCar.col" gutterSize="4" rowHeight="100px">
    <mat-grid-tile *ngFor="let silk of silkCarRecordInfo.aSideSilks">
      <ng-container *ngTemplateOutlet="silkTileTemp;context:{silk:silk,sideType:'A'}"></ng-container>
    </mat-grid-tile>
  </mat-grid-list>

  <div class="side-divide"></div>

  <mat-grid-list [cols]="silkCarRecordInfo.silkCar.col" gutterSize="4" rowHeight="100px">
    <mat-grid-tile *ngFor="let silk of silkCarRecordInfo.bSideSilks">
      <ng-container *ngTemplateOutlet="silkTileTemp;context:{silk:silk,sideType:'B'}"></ng-container>
    </mat-grid-tile>
  </mat-grid-list>
</section>

<ng-template #silkTileTemp let-sideType="sideType" let-silk="silk">
  <ng-container *ngIf="silk.id">
    <div [class.error]="silk.hasException" class="silk" fxLayout="column">
      <div (click)="toggleSelect(silk);$event.stopPropagation();" [matTooltipDisabled]="!silk.hasException" [matTooltip]="silk.tooltip" class="position" fxLayout fxLayoutAlign="center center">
        <span fxFlex>{{sideType}}-{{silk.row}}-{{silk.col}}</span>
        <mat-icon *ngIf="silk.selected" color="accent">done</mat-icon>
      </div>

      <mat-divider></mat-divider>

      <div fxFlex fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="2px">
        <span>{{silk.lineMachine.line.name}}-{{silk.spindle}}/{{silk.lineMachine.item}}-{{silk.doffingNum}}</span>
        <span (click)="copy(silk.code);$event.stopPropagation();">{{silk.code}}</span>
        <span>{{silk.grade?.name}}</span>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="!silk.id">
    <div class="silk empty" fxLayout="column">
      <div class="position" fxLayout fxLayoutAlign="center center">
        <div fxFlex fxLayout fxLayoutAlign="center center">
          {{sideType}}-{{silk.row}}-{{silk.col}}
        </div>
      </div>
    </div>
  </ng-container>
</ng-template>
